<template>
    <div class="show-contain"
         :class="[compOption.isClick && mode == 'sheji' ? 'active-bordert' : '',mode == 'sheji' ? 'widget-item' : '']"
         @click.stop="clickToggleBg"
    >
        <div style="display: flex;align-items: center;width: 100%;margin-bottom: 10px">
            <div class="required-title" v-if="mode != 'sheji' && compOption.options.required">*</div>
            <div class="sort-style" v-if="prentCompOption.isChildSort && prentCompOption.isPrentAndChildSort">
                {{ prentCompOption.sortTitle + '.' + (childInd + 1) }}
            </div>
            <div class="sort-style" v-else-if="prentCompOption.isChildSort">{{ childInd + 1 }}</div>
            <div class="sort-style" v-else-if="prentCompOption.isPrentAndChildSort">{{ prentCompOption.sortTitle }}
            </div>
            <div class="title-openEdit" @click.stop="openTitleEditor(compOption.displayName)"
                 v-html="mode == 'sheji' ? compOption.displayName : compOption.displayName + (compOption.options.totalSource == 0 ? '' :  ` <span style='width:80px;align-self: flex-end'>(${compOption.options.totalSource}) 分</span>`)"
                 :style="{border:mode == 'sheji' ? '1px solid rgba(204, 200, 200, 0.5)' : 'none',padding:mode == 'sheji' ? '10px' : '0',
           }" style="font-size: 18px"></div>
            <div style="margin-left: 10px" v-if="compOption.isClick && mode == 'sheji'">
                <div class="flex-row">
                    <!--                    <span class="el-icon-rank font-color-main" style="margin-right: 10px"></span>-->
                    <!--                    <span class="el-icon-document-copy font-color-main" style="margin-right: 10px"></span>-->
                    <span class="el-icon-delete font-color-main" @click="delSourceZu"></span>
                </div>
            </div>
        </div>
        <div  style="margin-bottom: 10px;width: 100%" v-if="mode == 'yulan' && (compOption.options.score !==null && compOption.options.score != '不适用')">
            <el-row style="display: flex;align-items: center">
                <el-col :span="1">
                    <div>已得</div>
                </el-col>
                <el-col :span="3">
                    <el-input v-model="compOption.options.score"  class="el-border-dev"
                              :disabled="sourceMode == 'yulan'"></el-input>
                </el-col>
                <el-col :span="2">
                    <div>分</div>
                </el-col>
            </el-row>
        </div>
        <div v-if="compOption.options.questionStem" :style="{marginBottom: mode == 'sheji' ? '10px' : '20px'}"
             style="width: 100%">
            <el-input v-model="compOption.options.placeholderContent" v-if="mode == 'sheji'"
                      placeholder="请输入题干说明"
                      style="width: 100%"></el-input>
            <div v-else class="tigan">
                {{ compOption.options.placeholderContent }}
            </div>
        </div>

        <div v-for="(item,index) in compOption.options.radioConfig" class="flex-row" style="justify-content: space-between;
width: 100%" :key="item.id">
            <el-radio :label="item.label"
                      v-model="mode == 'sheji' ? '' : compOption.options.value"
                      :disabled="mode == 'yulan' || compOption.options.readOnly ? true : false"
                      @change="changeValue"
                      :key="index"
                      :style="{marginBottom: index == compOption.options.radioConfig.length - 1 ? '0' : '10px'}"
            style="width: 70%;display: flex;align-items: center">
                <template v-if="compOption.options.showContent == '文本'">
                    <span v-if="mode == 'sheji'">
                    <el-input v-model="item.label" clearable></el-input>
                    <span style="margin-left: 10px;color: #ec2d2d" class="el-icon-delete-solid"
                          @click.stop="delRadio(index)"></span>
                    </span>
                        <span v-else>
                        {{item.label}}
                    </span>
                </template>
                <template v-else>
<!--                    todo 这是上传图片的-->
                    <el-upload
                        v-if="mode == 'sheji'"
                        class="avatar-uploader"
                        v-loading="loadingFile"
                        action="http://129.211.212.235:8095/file/upload"
                        :show-file-list="false"
                        :on-success="(res) => handleAvatarSuccess(res,index)"
                        :on-error="loadingFile = false"
                        :before-upload="(file) => beforeAvatarUpload(file,item)"
                    >
                        <el-image
                            style="width: 100px; height: 100px"
                            v-if="item.label"
                            :src="item.label"
                            fit="cover"
                            :preview-src-list="[item.label]"></el-image>
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-image
                        v-else-if="mode != 'sheji' && item.label"
                        style="width: 100px; height: 100px;border: 1px dashed #d9d9d9;
    border-radius: 6px;"
                        :src="item.label"
                        fit="cover"
                        :preview-src-list="[item.label]"
                    ></el-image>
                </template>
            </el-radio>

            <div class="flex-row">
                <div class="flex-row"
                     v-if="(compOption.options.sourceSelect == '此题有唯一答案和分值' || compOption.options.sourceSelect == '少选得部分分;错选得0分' || compOption.options.sourceSelect == '全部答对才得分') && mode == 'sheji'">
                    <span style="color: rgb(48, 49, 51);font-size: 14px;margin-right: 8px">{{compOption.options.sourceSelect == '此题有唯一答案和分值' ? '唯一答案' : '正确答案'}}</span>
                    <el-switch
                        v-model="item.onlyAnswer"
                        active-color="#409eff"
                        inactive-color="#909399"
                        @change="changeOnly(item)">
                    </el-switch>
                </div>
                <div class="flex-row"
                     v-if="(compOption.options.sourceSelect == '每个选项可自定义分值' || compOption.options.sourceSelect == '扣分题(默认得总分)'
|| compOption.options.sourceSelect == '少选得部分分;错选得0分') && mode == 'sheji'">
                    <span style="color: rgb(48, 49, 51);font-size: 14px;margin-right: 8px;width: 35px">分数</span>
                    <el-input v-model="item.source"></el-input>
                </div>
            </div>
        </div>
        <div  style="color: #409eff;margin-top: 10px" class="flex-row"
        v-if="mode == 'sheji'">
            <div class="iconfont icon-jiahao" style="margin-right: 5px"></div>
            <div @click.stop="submitForm">添加选项</div>
        </div>

        <div v-if="mode != 'sheji'" style="margin-top: 10px;width: 100%">
            <render-remark :comp-option="compOption" :mode="mode"></render-remark>
        </div>

        <dialog-editor ref="dialogEditor" @throwHtml="(html) => compOption.displayName = html"></dialog-editor>

    </div>
</template>
<script>
import {openEditor} from '@/minexs/index'
import {methodRef} from '@/components/form-designer/widget-panel/main-comp-panal/methodRef'
import {v4} from 'uuid'
import RenderRemark from "@/components/renderRemark/renderRemark.vue";
export default {
    name: "radio-editor",
    components: {RenderRemark},
    mixins: [openEditor, methodRef],
    props: {
        compOption: {
            type: Object,
        },
        prentCompOption: {
            type: Object,
        },
        childInd: {
            type: Number
        },
        mode: {
            type: String,
            default: 'sheji'
            /**
             * sheji
             * xiezuo
             * yulan
             * */
        },
        sourceMode:{
            type:String,
            default:'yulan'
        }
    },
    data(){
      return {
          loadingFile:false
      }
    },

    methods: {
        beforeAvatarUpload(file,item){
          if(item.label || this.mode != 'sheji') return false
            this.loadingFile = true
          return true
        },
        handleAvatarSuccess(res,index){
            this.loadingFile = false
            if(res.code == 200){
                this.compOption.options.radioConfig[index].label = res.data
            }
        },
        clickToggleBg() {
            if (this.$props.mode == 'sheji') this.$emit('changeClick', this.$props.compOption.id, this.$props.prentCompOption.id)
        },

        changeValue() {
            if (this.compOption.options.onChangeValue) {
                this.$emit('activeStartChange', {
                    code: this.compOption.options.onChangeValue,
                    value: this.compOption.options.value
                })
            }
        },
        delSourceZu() {
            this.$confirm('是否确认删除当前问题', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const ind = this.prentCompOption.widgetList.findIndex(item => item.id == this.compOption.id)
                if (ind != -1) {
                    this.prentCompOption.widgetList.splice(ind, 1)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }
            })
        },
        //配置
        submitForm(){
            this.compOption.options.radioConfig.push({
                id:v4(),
                label:'',
                source:0,
                onlyAnswer:false
            })
        },
        //删除
        delRadio(ind){
            this.compOption.options.radioConfig.splice(ind,1)
        }
    }

}
</script>

<style scoped lang="scss">
.widget-item {
  border: .5px solid #e5e5e5;
  border-radius: 3px;
  padding: 20px;
}

.show-contain{
    position: relative;
}
.show-contain ::v-deep .el-radio-group {
  display: flex;
  flex-direction: column;

  & ::v-deep .el-radio__label {
    font-size: 18px;
  }
}


.avatar-uploader{
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
